<template>
     <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>

     
         <router-link to="/VehicleList">车辆管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>车辆信息显示</el-breadcrumb-item>
 </el-breadcrumb></div>
    <!-- 查询 -->
     <el-form :inline="true" :model="forms" class="demo-form-inline">
            <el-form-item label="厂牌型号:">
      <el-input v-model="forms.BrandAndModel" placeholder="请输入厂牌型号" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="车牌号:">
      <el-input v-model="forms.PlateNumber" placeholder="请输入车牌号" clearable style="width: 150px;"/>
    </el-form-item>
       <el-form-item label="司机姓名:">
      <el-input v-model="forms.DriverName" placeholder="请输入司机姓名" clearable style="width: 150px;"/>
    </el-form-item>
        <el-form-item label="所属公司:">
      <el-input v-model="forms.BelongingCompany" placeholder="请输入所属公司" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getListvehicle" >查询</el-button>
          <el-button type="primary" @click="reset()" >重置</el-button>
    </el-form-item>
  </el-form> 
  <!-- 显示列表 -->
       <el-button type="primary" @click="Createvehicle" >新增</el-button>
           <el-button type="danger" @click="getDelAllvehicle" >删除</el-button>
              <el-button type="success" @click="getExport" >导出</el-button>
            
     <el-table :data="Listvehicle" border style="width: 100%" ref="multipleTableRef"  @selection-change="handleSelectionChange">
       <el-table-column type="selection"  width="55" />
        <el-table-column prop="brandAndModel" label="厂牌型号" align="center" />
          <el-table-column prop="plateNumber" label="车牌号" align="center" />
             <el-table-column prop="driverName" label="司机姓名" align="center" />
                      <el-table-column prop="belongingCompany" label="所属公司" align="center" />
     <el-table-column prop="payMethod" label="车型（长*宽*高）" align="center" >
        <template v-slot="scoped">
          <span>{{scoped.row.vehicleLong}}*{{scoped.row.vehicleWide}}*{{scoped.row.vehicleTall}}</span>
        </template>
     </el-table-column>
       <el-table-column prop="vehicleColor" label="车辆颜色" align="center" />
 <el-table-column prop="acquisitionDate" label="购置日期" align="center" >
                 <template v-slot="scope">
<span>{{ scope.row.acquisitionDate.replace("T"," ").substring(0,10)}}</span>
    </template>
            </el-table-column>
                <el-table-column prop="tradingCard" label="营运证号" align="center" />
                <el-table-column prop="insuranceExpirationDate" label="保险到期时间" align="center" >
                 <template v-slot="scope">
<span>{{ scope.row.insuranceExpirationDate.replace("T"," ").substring(0,10)}}</span>
    </template>
            </el-table-column>
            <el-table-column prop="annualInspectionExpiratDate" label="年检到期时间" align="center" >
                 <template v-slot="scope">
<span>{{ scope.row.annualInspectionExpiratDate.replace("T"," ").substring(0,10) }}</span>
    </template>
            </el-table-column>
             <el-table-column prop="maintenanceMileageSetting" label="保养公里设置" align="center" >
                 <template v-slot="scope">
<span>{{scope.row.maintenanceMileageSetting+"公里" }}</span>
    </template>
            </el-table-column>
          
             <el-table-column prop="date" label="操作" align="center">
  <template v-slot="scope">
    <!-- 编辑操作 -->
    <div class="table-operation" >
      <el-icon class="operation-icon"><EditPen /></el-icon>
      <span class="operation-text" @click="edit(scope.row.vehicleId)">编辑</span>
    </div>
 
    <!-- 删除操作 -->
    <div class="table-operation" style="margin-top: 8px;" >
      <el-icon class="operation-icon"><CloseBold /></el-icon>
      <span class="operation-text" @click="del(scope.row.vehicleId)">删除</span>
    </div>
 
    <!-- 查看操作 -->
    <div class="table-operation" style="margin-top: 8px;" >
      <el-icon class="operation-icon"><CircleCheck /></el-icon>
      <span class="operation-text" @click="ed(scope.row.vehicleId)">查看</span>
    </div>
  </template>
  
</el-table-column>
            
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">

    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[3, 6, 9, 11]"
     style="float: right;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    <!-- 查看车辆信息 -->
   <div>
    <el-dialog
    v-model="dialogVisible1"
    title="车辆信息"
    width="800"
  >
 <el-form ref="ruleFormRef" style="max-width: 1000px" :model="formm"  label-width="auto" 
        class="demo-ruleForm"  status-icon>
         <el-row :gutter="40">
    <el-col :span="11">
         <el-form-item label="厂牌型号：" prop="brandAndModel">
            <el-input v-model="formm.brandAndModel" placeholder="请输入车牌号" />
        </el-form-item>
         <el-form-item label="司机姓名：" prop="driverName">
            <el-input v-model="formm.driverName" placeholder="请输入司机姓名" />
        </el-form-item>
        <el-form-item label="车型：" prop="licensePlateNumber">
            <el-input v-model="formm.vehicleLong" placeholder="长" style="width: 40px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
             <el-input v-model="formm.vehicleWide" placeholder="宽" style="width: 40px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-input v-model="formm.vehicleTall" placeholder="高" style="width: 40px;"/> 
        </el-form-item>
         <el-form-item label="购置日期：" prop="acquisitionDate">
             <el-date-picker
             v-model="formm.acquisitionDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入购置日期"
            style="width: 100%"
          />
           
        </el-form-item>
         <el-form-item label="保险到期日期：" prop="insuranceExpirationDate">
             <el-date-picker
             v-model="formm.insuranceExpirationDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入保险到期日期"
            style="width: 100%"
          />
           
        </el-form-item>
         <el-form-item label="保养公里数设置：" prop="maintenanceMileageSetting">
            <el-input v-model="formm.maintenanceMileageSetting" placeholder="请输入保养公里数设置" />
        </el-form-item>
         <el-form-item label="车辆照片：" prop="vehicleImg">
             <el-upload
    class="avatar-uploader"
    action="/bwrite/api/CargoOwner/GetPicName"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
   
  >
    <img v-if="formm.vehicleImg" :src="'http://113.44.151.225:8000/bwrite/Pic/'+formm.vehicleImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
           
        </el-form-item>
         <el-form-item label="保险卡照片" prop="insuranceCarImg">
             <el-upload
    class="avatar-uploader"
    action="/bwrite/api/CargoOwner/GetPicName"
    :show-file-list="false"
    :on-success="handleAvatarSuccess1"
   
  >
    <img v-if="formm.insuranceCarImg" :src="'http://113.44.151.225:8000/bwrite/Pic/'+formm.insuranceCarImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
         
        </el-form-item>
    </el-col>
    <el-col :span="11">
        <el-form-item label="车牌号:" prop="plateNumber">
            <el-input v-model="formm.plateNumber" placeholder="请输入车牌号" />
        </el-form-item>
          <el-form-item label="所属公司:" prop="belongingCompany">
            <el-input v-model="formm.belongingCompany" placeholder="请输入所属公司" />
        </el-form-item>
         <el-form-item label="车辆颜色：" prop="vehicleColor">
            <el-input v-model="formm.vehicleColor" placeholder="请输入车辆颜色" />
        </el-form-item>
         <el-form-item label="营运证号：" prop="tradingCard">
            <el-input v-model="formm.tradingCard" placeholder="请输入营运证号" />
        </el-form-item>
         <el-form-item label="年检到期日期：" prop="annualInspectionExpiratDate">
            <el-date-picker
             v-model="formm.annualInspectionExpiratDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入年检到期日期"
            style="width: 100%"
          />
           
        </el-form-item>
    </el-col>
  </el-row>
    </el-form> 
    <template #footer>
      <div class="dialog-footer">
       
        <el-button type="primary" @click="dialogVisible1 = false">
          关闭
        </el-button> 
      </div>
    </template>
  </el-dialog>
   </div>
</template>
<script setup lang="ts">
//查看信息
const dialogVisible1 = ref(false)
const formm= reactive({
  "brandAndModel": "",
  "plateNumber": "",
  "driverName": "",
  "belongingCompany": "",
  "vehicleLong": "",
  "vehicleWide": "",
  "vehicleTall": "",
  "vehicleColor": "",
  "acquisitionDate": "",
  "tradingCard": "",
  "insuranceExpirationDate": "",
  "annualInspectionExpiratDate": "",
  "maintenanceMileageSetting": "",
  "vehicleImg": "",
  "insuranceCarImg": "",
})


//图片上传
import { Plus } from '@element-plus/icons-vue'
const handleAvatarSuccess = (val:any) => {
    formm.vehicleImg = val
}
const handleAvatarSuccess1 = (val:any) => {
    formm.insuranceCarImg = val
}
const ed = (id:number) => {
    axios.get("/bwrite/api/Vehicle/GetVehicleBy?VehicleId=" + id).then(ter => {
        formm.brandAndModel = ter.data.data.brandAndModel
        formm.plateNumber = ter.data.data.plateNumber
        formm.driverName = ter.data.data.driverName
        formm.belongingCompany = ter.data.data.belongingCompany
        formm.vehicleLong = ter.data.data.vehicleLong
        formm.vehicleWide = ter.data.data.vehicleWide
        formm.vehicleTall = ter.data.data.vehicleTall
        formm.vehicleColor = ter.data.data.vehicleColor
        formm.acquisitionDate = ter.data.data.acquisitionDate
        formm.tradingCard = ter.data.data.tradingCard
        formm.insuranceExpirationDate = ter.data.data.insuranceExpirationDate
        formm.annualInspectionExpiratDate = ter.data.data.annualInspectionExpiratDate
        formm.maintenanceMileageSetting = ter.data.data.maintenanceMileageSetting
        formm.vehicleImg = ter.data.data.vehicleImg
      formm.insuranceCarImg = ter.data.data.insuranceCarImg
         form.deletedBy = ter.data.data.deletedBy
         form.deletedDate = ter.data.data.deletedDate
    })
   dialogVisible1.value = true
}
//分页
const handleSizeChange = (val: number) => {
    page.PageSize = val
  getListvehicle()
}
const handleCurrentChange = (val: number) => {
    page.PageIndex = val  
  getListvehicle()
}
//图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
    Star,
    CloseBold,
    EditPen,
  CircleCheck
} from '@element-plus/icons-vue'
//多选
const multipleSelection = ref([])
const multipleSelections = ref([])//接收整条数据
const handleSelectionChange = (val: any) => {
  multipleSelection.value = (val.map(d => d.vehicleId))
    multipleSelections.value = val
   console.log(multipleSelection.value) //多选的id
  
}
const form:any=reactive({
  buttonArray:[]
})
//根据菜单id查询按钮功能权限
const getRoleMenuFun=()=>{
  axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
    params: {
      menuId:route.query.id
    }
  }).then(res=>{
    console.log(res);
    form.buttonArray=res.data.data
  }).catch(err=>{
    console.log(err);
    
  })    
}
//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//变量
const forms=reactive({
    BrandAndModel: "",
    PlateNumber: "",
    DriverName: "",
   BelongingCompany:""
})
//分页
const page=reactive({
    PageIndex: 1,
    PageSize: 3,
    pageCount: 0,
    totalCount:0
})
//方法
//显示车辆方法
const Listvehicle: any = ref([])
const getListvehicle = () => {
    axios.get("/bread/api/Vehicles/GetCargoOwnerAll", {
        params: {
            BrandAndModel: forms.BrandAndModel,
            PlateNumber: forms.PlateNumber,
                  DriverName: forms.DriverName,
            BelongingCompany: forms.BelongingCompany,
            PageIndex: page.PageIndex,
            PageSize:page.PageSize,
        }
    }).then(ter => {
        Listvehicle.value = ter.data.data.list
     console.log(ter.data)
        page.pageCount = ter.data.data.pageCount
        page.totalCount = ter.data.data.totalCount
      
    
    }).catch(err => {
        console.log(err);
    })
}
//导出
import * as XLSX from 'xlsx';// 导出Excel
const getExport = () => {
  // let url = '/bread/api/CargoOwners/GetExcelName?CargoOwnerName='+forms.CargoOwnerName+'&CargoOwnerPhone='+forms.CargoOwnerPhone+'&DriverLicenseDate='+forms.DriverLicenseDate+'&PageIndex='+page.PageIndex+'&PageSize='+page.PageSize
  // window.location.href = url;
    ElMessageBox.confirm("是否确认导出当前选择的数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
    .then((response) => {
        //  this.selectdata 是复选框的 数据列表
        if (multipleSelections.value.length <= 0) {
            ElMessage.warning('请选择数据！');
            return;
        }
        let tableData = [
            ['序号','厂牌型号','车牌号', '司机姓名', '车型',"车辆颜色","购置日期","营运证号","保险到期时间","年检到期时间","保养公里设置"]//导出表头
        ] // 表格表头
        multipleSelections.value.forEach((item, index) => {
            let rowData= []
            //导出内容的字段
            rowData = [
                index + 1, 
                item.brandAndModel,
                item.plateNumber,
              item.driverName,
                  item.vehicleLong+'*'+item.vehicleWide+'*'+item.vehicleTall,
                item.vehicleColor,
              item.acquisitionDate,
              item.tradingCard,
              item.insuranceExpirationDate,
              item.annualInspectionExpiratDate,
                        item.maintenanceMileageSetting,

            ]
            tableData.push(rowData)
        })
        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
        let bookNew = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 工作簿名称
        let name = '车辆信息表' + timeFormat() + '.xlsx'
        XLSX.writeFile(bookNew, name) // 保存的文件名
    })
}
const timeFormat=()=> {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        return year + '-' + addZero(month) + '-' + addZero(date) + ' ' + addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
const addZero=(num:any)=> {
    return num < 10 ? '0' + num : num
}
//删除（单删）
import { ElMessage, ElMessageBox } from 'element-plus'
const del = (id:number) => {
     ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
        axios.post("/bwrite/api/Vehicle/DeleteVehicle?VehicleId="+id).then(ter => {
            if (ter.data.code>0) {
                ElMessage.success('删除成功')
            getListvehicle()
            }
            else {
            ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
    
    })
}
//新增车辆跳转
const Createvehicle = () => {
    router.push("/CreateVehicle")
}
//删除（多删）
const getDelAllvehicle = () => {
    if (multipleSelection.value.length == 0) { 
        ElMessage.error('请选择要删除的车辆信息')
        return
    }
      ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
          .then(() => {

              axios.post("/bwrite/api/Vehicle/DeleteAllVehicle", {
            vehicleIds:multipleSelection.value
        }).then(ter => {
            if (ter.data.code>0) {
                ElMessage.success('删除成功')
                 getListvehicle()
            }
            else {
            ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
    
    })
}
//修改线路
const edit = (id:number) => {
    router.push({
        path: "/UpdateVehicle",
        query: {
            id:id
        }
    })
}
//重置查询条件
const reset = () => {
     forms.BrandAndModel="",
    forms.PlateNumber="",
    forms.DriverName="",
   forms.BelongingCompany=""
    getListvehicle()
}
//钩子函数
onMounted(async() => {
  getListvehicle()
    getRoleMenuFun()
})
</script>
<style scoped>
.table-operation {
  display: flex;
  align-items: center;
}
 
.operation-icon {
  color: blue;
  margin-right: 8px; /* 图标和文本之间的间距 */
}
 
.operation-text {
  color: blue;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>